<!--
 * @Author: iowen
 * @Author URI: https://www.iowen.cn/
 * @Date: 2021-06-03 08:55:57
 * @LastEditors: iowen
 * @LastEditTime: 2024-01-11 10:58:08
 * @FilePath: \onenav\fx\io-fx10.html
 * @Description: 
-->
<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex" />
    <title>io-fx10</title>
    <meta name="author" content="iowen.cn" />
    <style>
      body {
        background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
        background: radial-gradient(
          220% 105% at top center,
          #1b2947 10%,
          #75517d 40%,
          #e96f92 65%,
          #f7f7b6
        );
        background-attachment: fixed;
        overflow: hidden;
      }
      @keyframes rotate {
        0% {
          transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
        }
        100% {
          transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
        }
      }
      .stars {
        transform: perspective(500px);
        transform-style: preserve-3d;
        position: absolute;
        bottom: 0;
        perspective-origin: 50% 100%;
        left: 50%;
        animation: rotate 90s infinite linear;
      }
      .star {
        width: 2px;
        height: 2px;
        background: #f7f7b6;
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: 0 0 -300px;
        transform: translate3d(0, 0, -300px);
        backface-visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div class="stars"></div>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        var stars = 800
        var $stars = $('.stars')
        var r = 800
        for (var i = 0; i < stars; i++) {
          var $star = $('<div/>').addClass('star')
          $stars.append($star)
        }
        $('.star').each(function () {
          var cur = $(this)
          var s = 0.2 + Math.random() * 1
          var curR = r + Math.random() * 300
          cur.css({
            transformOrigin: '0 0 ' + curR + 'px',
            transform:
              ' translate3d(0,0,-' +
              curR +
              'px) rotateY(' +
              Math.random() * 360 +
              'deg) rotateX(' +
              Math.random() * -50 +
              'deg) scale(' +
              s +
              ',' +
              s +
              ')'
          })
        })
      })
    </script>
  </body>
</html>
